<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="css/index.css" /> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: #721c24;
        }

        h1 {
            text-align: center;
            color: #333;
            margin: 20px 0;

        }

        table {
            margin: 0 auto;
            width: 800px;
            border-collapse: collapse;
            color: #004085;
        }

        th {
            padding: 10px;
            background: #cfe5ff;

            font-size: 20px;
            font-weight: 400;
        }

        td,
        th {
            border: 1px solid #b8daff;
        }

        td {
            padding: 10px;
            color: #666;
            text-align: center;
            font-size: 16px;
        }

        tbody tr {
            background: #fff;
        }

        tbody tr:hover {
            background: #e1ecf8;
        }

        .info {
            width: 900px;
            margin: 50px auto;
            text-align: center;
        }

        .info input,
        .info select {
            width: 80px;
            height: 27px;
            outline: none;
            border-radius: 5px;
            border: 1px solid #b8daff;
            padding-left: 5px;
            box-sizing: border-box;
            margin-right: 15px;
        }

        .info button {
            width: 60px;
            height: 27px;
            background-color: #004085;
            outline: none;
            border: 0;
            color: #fff;
            cursor: pointer;
            border-radius: 5px;
        }

        .info .age {
            width: 50px;
        }

        .fuck {

            margin: 10px;
            margin-left: 1000px;
        }
    </style>
</head>

<body>
    <h1>新增角色</h1>
    <form class="info" autocomplete="off">
        姓名：<input type="text" class="uname" name="uname" />
        年龄：<input type="text" class="age" name="age" />
        性别:
        <select name="gender" class="gender">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
        等级：<input type="text" class="salary" name="salary" />
        所属：<input name="city" class="city">
        <!-- <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
        </input> -->
        <button class="add">录入</button>
    </form>

    <h1>你目前获得的角色</h1>
    <p class="fuck"></p>

    <table>

        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>等级</th>
                <th>所属</th>
                <th>录入时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 
          <tr>
            <td>1001</td>
            <td>欧阳霸天</td>
            <td>19</td>
            <td>男</td>
            <td>15000</td>
            <td>上海</td>
             <td>2019 10-1</td>
            <td>
              <a href="javascript:">删除</a>
            </td>
          </tr> 
          -->
        </tbody>
    </table>
</body>
<script>
    // 参考数据
    const initData = [
        {
            stuId: 1001,
            uname: '欧阳霸天',
            age: 19,
            gender: '男',
            salary: '20000',
            city: '上海',
        }
    ]
    // localStorage.setItem('arr', JSON.stringify(initData));
    let arr = JSON.parse(localStorage.getItem('arr')) ? JSON.parse(localStorage.getItem('arr')) : [];
    console.log(arr);

    function render() {
        // for (i = 0; i < arr.length; i++) {
        //     let tr = document.createElement('tr');
        //     tr.innerHTML = ` <td>${i + 1}</td>
        //     <td>${arr[i].uname}</td>
        //     <td>${arr[i].age}</td>
        //     <td>${arr[i].gender}</td>
        //     <td>${arr[i].salary}</td>
        //     <td>${arr[i].city}</td>
        //      <td>${arr[i].time}</td>
        //     <td>
        //       <a href="javascript:"data-id=${i}>删除</a>
        //     </td>`
        //     tbody.appendChild(tr);
        //     console.log(tr);
        // }

        // 下面用map方法
        let newarr = arr.map(function (items, index) {
            return `<tr>
            <td>${index + 1}</td>
            <td>${items.uname}</td>
            <td>${items.age}</td>
            <td>${items.gender}</td>
            <td>${items.salary}</td>
            <td>${items.city}</td>
             <td>${items.time}</td>
            <td>
              <a href="javascript:" data-id=${index}>删除</a>
            </td>
          </tr> `
        })
        tbody.innerHTML = newarr.join('');
        document.querySelector('.fuck').innerHTML = `你现在共有${arr.length}个角色`
    }
    const info = document.querySelector('.info');
    const uname = document.querySelector('.uname');
    const age = document.querySelector('.age');
    const gender = document.querySelector('.gender');
    const salary = document.querySelector('.salary');
    const city = document.querySelector('.city');
    const tbody = document.querySelector('tbody');
    const items = info.querySelectorAll('[name]');
    info.addEventListener('submit', function (e) {
        e.preventDefault();
        for (i = 0; i < items.length; i++) {
            if (items[i].value == '') {
                return alert('你有一项输入的值为空');
            }
        }
        let obj = new Object;
        obj.uname = uname.value;
        obj.age = age.value;
        obj.gender = gender.value;
        obj.salary = salary.value;
        obj.city = city.value;
        obj.time = new Date().toLocaleString();
        arr.push(obj);
        localStorage.setItem('arr', JSON.stringify(arr));
        render();
        this.reset();
    })
    render();
    tbody.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            if (confirm('你确定要删除吗？')) {
                arr.splice(e.target.dataset.id, 1);
                localStorage.setItem('arr', JSON.stringify(arr))
            }
        }
        render();
    })
</script>

</html>